<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<script src="../js/vue.js"></script>
<div id="app">

  <my-cpn></my-cpn>
  <mycpn></mycpn>
</div>

<script>

  //创建一个组件构造器
  const cpnConstructor = Vue.extend({
    template: `
  <div>
    <h2>我是标题</h2>
    <p>我是内容，哈哈哈哈哈</p>
    <p>我是内容，呵呵呵</p>
  </div>`
  })
  // ------->全局组件的注册方式（全局组件可以在多个Vue实例中使用）
  Vue.component('my-cpn', cpnConstructor);


  const cpnConstructor1 = Vue.extend({
    template: `
  <div>
    <h2>我是标题1</h2>
    <p>我是内容，哈哈哈哈哈1</p>
    <p>我是内容，呵呵呵1</p>
  </div>`
  })

  const app = new Vue({
    el: '#app',
    data: {
      message: "第一次，系统的学VUE"
    },
    //局部组件的注册方式，只能在当前vue实例中使用 (组测的组件名不能有大写字母，操蛋)
    components: {
      //mycpn是html上使用的标签名
      mycpn: cpnConstructor1
    }

  })
</script>

</body>
</html>